<template>
  <div class="base-echart">
    <div ref="echartDivRef" id="wo" class="echart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      echartInstance: null,
    };
  },
  props: {
    options: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    this.initChart();
    this.updateChart();
    window.addEventListener("resize", () => {
      this.echartInstance.resize();
    });
  },
  watch: {
    options() {
      this.updateChart()
    }
  },
  methods: {
    initChart() {
      this.echartInstance = echarts.init(this.$refs.echartDivRef);
    },
    updateChart() {
      this.echartInstance.setOption(this.options);
    },
  },
};
</script>
<style scoped>
.base-echart {
  width: 100%;
  height: 100%;
}
.echart {
  width: 100%;
  height: 100%;
}
</style>